/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, {useState,useEffect} from 'react';
import {StyleSheet, View, Dimensions, Image} from 'react-native';
import {useBreakpointValue, useHeightBreakpointValue} from '@hadss/react_native_adaptive_layout';
import type {ViewStyle, ImageSourcePropType} from 'react-native';
import Context from './Context';
import type {ModeType, CameraPosition} from './Context';
import {Options, ModeSetting, Action, Camera, Counter} from './widegts';

const ZOOM = require('../../../assets/pic/zoom_range.png');

/**
 * @description 拍照录像页
 * @param navigation
 * @returns ReactNode
 */
const Pic = ({navigation}: any) => {
  const [mode, setMode] = useState<ModeType>('photo');
  const [mediaType, setMediaType] = useState<ModeType>('photo');
  const [position, setPosition] = useState<CameraPosition>('back');
  const [isRecording, setIsRecording] = useState<boolean>(false);
  const [path, setPath] = useState<ImageSourcePropType>(
    require('../../../assets/pic/ic_camera_shoot_bar_photo_normal.png'),
  );
  const [isOpenVideo, setIsOpenVideo] = useState(false);
  const [isOpenPhoto, setIsOpenPhoto] = useState(true);
  const {width, height} = Dimensions.get('window');
  const [widthScreen, setWidthScreen] = useState(width);
  const [heightScreen, setHeightScreen] = useState(height);
  const [zoom, setZoom] = useState(1);
  /** 高度是否匹配小折叠或者小分屏 */
  const isSmall = useHeightBreakpointValue<boolean>({
    base: false,
    // 小分屏
    sm: true,
    // 小折叠
    md: true,
    lg: false,
  });

  /** 容器动态内间距 */
  const padding = useBreakpointValue<ViewStyle>({
    base: {paddingTop: 36, paddingBottom: 28},
    sm: isSmall ? {paddingTop: 16, paddingBottom: 0} : {paddingTop: 36, paddingBottom: 0},
  });
  const camerapadding = useBreakpointValue<ViewStyle>({
    base: {top: 36, bottom: 28},
    sm: isSmall ? {top: 16, bottom: 0} : {top: 36, bottom: 0},
  });
  const cameraContainer = useBreakpointValue<ViewStyle>({
    base: {
      position: 'relative',
      width: isOpenVideo ? heightScreen * (9 / 16) : heightScreen * (3 / 4),
      height: heightScreen,
      zIndex: 0,
      top: 0,
    },
  });

  
  useEffect(() => {
    // 初始化方向
    const updateOrientation = () => {
      const {width, height} = Dimensions.get('window');
      setWidthScreen(width);
      setHeightScreen(height);
      // 这里可以根据宽高比来判断是横屏还是竖屏
      if (width > height) {
        console.log('Landscape orientation');
        // 横屏
      } else {
        console.log('Portrait orientation');
        // 竖屏
      }
    };

    updateOrientation(); // 初始调用

    // 添加监听
    const subscription = Dimensions.addEventListener('change', updateOrientation);

    // 组件卸载时移除监听
    return () => subscription.remove();
  }, []);
  return (
    <Context.Provider
      value={{
        mode,
        setMode,
        position,
        setPosition,
        isRecording,
        setIsRecording,
        path,
        setPath,
        mediaType,
        setMediaType,
        isOpenVideo,
        setIsOpenVideo,
        isOpenPhoto,
        setIsOpenPhoto,
        zoom,
        setZoom,
      }}>
      <View style={[styles.container, {...padding}]}>
        {/* 背景层 - 相机 */}
        <View style={cameraContainer}>
          <Camera isOpenVideo={isOpenVideo} isOpenPhoto={isOpenPhoto} zoom={zoom} />
        </View>

        {/* 顶部操作栏 */}
        <View style={styles.topBar}>
          <Options
            onPress={(): void => {
              navigation.goBack();
            }}
          />
          {/* Counter是录像计时 */}
          {isRecording && <Counter />}
        </View>

        {/* 底部操作栏 */}
        {/* <View style={styles.bottomBar}> */}
          <Wrapper width={width} isSmall={isSmall ?? false} />
          {/* <Preview /> */}
        {/* </View> */}
      </View>
    </Context.Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    justifyContent: 'center', // 垂直居中
    alignItems: 'center', // 水平居中
  },
  cameraParent: {
    maxWidth: "100%",
    maxHeight: "100%",
  },
  topBar: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    paddingTop: 36, // 根据实际状态栏高度调整
    zIndex: 1,
  },
  // bottomBar: {
  //   position: 'absolute',
  //   bottom: 0,
  //   left: 0,
  //   right: 0,
  //   flexDirection: 'row',
  //   justifyContent: 'space-between',
  //   alignItems: 'center',
  //   paddingHorizontal: 16,
  //   paddingBottom: 30, // 根据实际安全区域调整
  //   zIndex: 1,
  // },
});

/**
 * @description 相机底部区域或右侧区域，需要根据屏幕端点进行设置
 * @param props
 * @returns
 */
const Wrapper = (props: {width: number; isSmall: boolean}) => {
  // const zoom = useBreakpointValue<ViewStyle>({
  //   base: {
  //     paddingLeft: (props.width - 110) / 2 + 19.5,
  //     display: props.isSmall ? 'none' : 'flex',
  //   }
  // })
  const render = useBreakpointValue({
    base: (
      <View
        style={{
          bottom: props.isSmall ? 8 : 82,
          width: '100%',
          position: 'absolute',
        }}>
           {/* 焦距 */}
        {/* <View style={zoom}>
          <Image source={ZOOM} style={{width: 105, height: 32}} />
        </View> */}
        <ModeSetting />
        <Action />
      </View>
    ),
  });
  return <>{render}</>;
};

export default Pic;
